<template>
    <div>
        Demo:
        <ul>
            <li v-for="(item,index) in names" v-bind:key="index">{{ item }}</li>
        </ul>
        <button v-on:click="addHandler">add</button>
        <div>
            <!-- {{ str.split('').reverse().join('') }} -->
            <!-- {{ reverseStr }} -->
            {{ mReverseStr() }}
        </div>
        <div>
            <!-- {{ str.split('').reverse().join('') }} -->
            <!-- {{ reverseStr }} -->
            {{ mReverseStr() }}
        </div>

        <div>
            <p v-bind:class="{'active':active,'error':hasError}">Hello</p>
            <p v-bind:class="['p1','p2',header,footer]">World</p>
            <p v-bind:class="[{'active':active},footer,'err-'+danger]">Hello World</p>
        </div>

        <div>
            <p v-bind:style="{color:'green',fontSize:'30px'}">Hello</p>
        </div>

    </div>
</template>
<script>
export default {
    name:"Demo",
    data(){
        return{
            names:["iwen","ime","frank"],
            str:"Hello",
            active:true,
            hasError:true,
            header:"headers",
            footer:'footers',
            danger:"danger"
        }
    },
    methods:{
        addHandler(event){
            // 读到names数组
            // this.names.push("sakura")
            // const currentArrr = this.names.concat(["sakura"]);
            // this.names = currentArrr;
        },
        mReverseStr(){
            return this.str.split('').reverse().join('');
        }
    },
    // 计算属性
    computed:{
        reverseStr(){
            return this.str.split('').reverse().join('');
        }
    }
}
</script>
<style scoped>

.active{
    color:red;
}

</style>
